<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" label-width="100px">
            <!-- <el-form-item label="时间选择：" class="width100">
              <el-radio-group v-model="tableFrom.dateLimit" type="button" class="mr20" size="small" @change="selectChange(tableFrom.dateLimit)">
                <el-radio-button v-for="(item,i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text }}</el-radio-button>
              </el-radio-group>
              <el-date-picker v-model="timeVal" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;" @change="onchangeTime" />
            </el-form-item>
            <el-form-item label="关键字：">
              <el-input v-model="tableFrom.keywords" placeholder="请输入姓名、电话、UID" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
              </el-input>
            </el-form-item> -->
          </el-form>
        </div>
        <!-- <cards-data :cardLists="cardLists"></cards-data> -->
      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table"
        highlight-current-row>
        <el-table-column prop="uid" label="ID" width="60" />
        <!-- <el-table-column label="头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image :src="scope.row.image" :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column> -->
        <!-- {
        "id": 2,
        "image": "http://example.com/path/to/image.jpg",
        "camperName": "张三",
        "camperSex": 1,
        "camperAge": 12,
        "camperIdType": 1,
        "camperIdNumber": "123456789012345678",
        "camperBirthday": "2012-05-14 10:30:00",
        "camperNationality": "汉族",
        "camperHeight": 1.45,
        "camperWeight": 40.5,
        "camperHobby": "游泳, 篮球",
        "camperHealthStatus": "健康",
        "camperParentMessage": "希望你能度过一个愉快的夏令营时光！",
        "camperGuardianName": "李四",
        "camperGuardianPhone": "13812345678",
        "emergencyPhoneNumber": "13987654321",
        "relationship": "父亲",
        "detailedAddress": "北京市朝阳区某街道123号",
        "howToObtain": "通过学校报名",
        "notes": "无特殊需求",
        "userId": 1
        }, -->

        <el-table-column prop="camperName" label="姓名" min-width="150" />
        <el-table-column prop="camperSex" label="性别" min-width="150" />
        <el-table-column prop="camperAge" label="年龄" min-width="150" />
        <!-- <el-table-column prop="camperIdType" label="证件类型" min-width="150" /> -->
        <el-table-column prop="camperIdNumber" label="证件号码" min-width="150" />
        <el-table-column prop="camperBirthday" label="出生日期" min-width="150" />
        <el-table-column prop="camperNationality" label="民族" min-width="150" />
        <el-table-column prop="camperHeight" label="身高" min-width="150" />
        <el-table-column prop="camperWeight" label="体重" min-width="150" />
        <el-table-column prop="camperHobby" label="兴趣爱好" min-width="150" />
        <el-table-column prop="camperHealthStatus" label="健康状况" min-width="150" />
        <el-table-column prop="camperParentMessage" label="家长寄语" min-width="150" />
        <el-table-column prop="camperGuardianName" label="监护人姓名" min-width="150" />
        <el-table-column prop="camperGuardianPhone" label="监护人电话" min-width="150" />
        <el-table-column prop="emergencyPhoneNumber" label="紧急联系电话" min-width="150" />
        <el-table-column prop="relationship" label="与监护人关系" min-width="150" />
        <el-table-column prop="detailedAddress" label="详细地址" min-width="150" />
        <el-table-column prop="howToObtain" label="获取方式" min-width="150" />
        <el-table-column prop="notes" label="备注" min-width="150" />
        <el-table-column prop="userId" label="用户ID" min-width="150" />
        <div v-if="1 == 2">
          <el-table-column label="操作" min-width="150" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" class="mr10" @click="onSpread(scope.row.uid, 'man', '推广人')"
                v-hasPermi="['admin:retail:spread:list']">推广人</el-button>
              <el-dropdown>
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="onSpreadOrder(scope.row.uid, 'order', '推广订单')"
                    v-if="checkPermi(['admin:retail:spread:order:list'])">推广订单</el-dropdown-item>
                  <!--<el-dropdown-item @click.native="onSpreadType(scope.row.uid)">推广方式</el-dropdown-item>-->
                  <el-dropdown-item @click.native="clearSpread(scope.row)"
                    v-if="scope.row.spreadNickname && scope.row.spreadNickname !== '无'"
                    v-hasPermi="['admin:retail:spread:clean']">清除上级推广人</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </div>

      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <!--推广人-->
    <el-dialog :title="titleName + '列表'" :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
      <div class="container">
        <el-form size="small" label-width="100px">
          <el-form-item v-if="this.onName !== 'man'" key="1" label="时间选择：" class="width100">
            <el-radio-group v-model="spreadFrom.dateLimit" type="button" class="mr20" size="small"
              @change="selectChangeSpread(spreadFrom.dateLimit)">
              <el-radio-button v-for="(item, i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text
                }}</el-radio-button>
            </el-radio-group>
            <el-date-picker v-model="timeValSpread" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small"
              type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;"
              @change="onchangeTimeSpread" />
          </el-form-item>
          <el-form-item label="用户类型：">
            <el-radio-group v-model="spreadFrom.type" size="small" @change="onChanges">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">一级推广人</el-radio-button>
              <el-radio-button label="2">二级推广人</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="关键字：" class="width100">
            <el-input v-model="spreadFrom.nickName" :placeholder="onName === 'order' ? '请输入订单号' : '请输入姓名、电话、UID'"
              class="selWidth" size="small" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" @click="onChanges" />
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-if="onName === 'man'" key="men" v-loading="spreadLoading" :data="spreadData.data" style="width: 100%"
        size="mini" class="table" highlight-current-row>
        <el-table-column prop="uid" label="ID" width="60" />
        <el-table-column label="头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户信息" min-width="130" />
        <el-table-column prop="is_promoter" label="是否推广员" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.isPromoter | filterYesOrNo }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable label="推广人数" min-width="120" prop="spreadCount" />
        <el-table-column sortable label="订单数" min-width="120" prop="payCount" />
        <!--<el-table-column-->
        <!--prop="spreadTime"-->
        <!--label="关注时间"-->
        <!--min-width="150"-->
        <!--/>-->
      </el-table>
      <el-table v-if="onName === 'order'" key="order" v-loading="spreadLoading" :data="spreadData.data"
        style="width: 100%" size="mini" class="table" highlight-current-row>
        <el-table-column prop="orderId" label="订单ID" min-width="120" />
        <el-table-column label="用户信息" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.realName }}<el-divider direction="vertical"></el-divider>{{ scope.row.userPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="时间" min-width="150" />
        <el-table-column sortable label="返佣金额" min-width="120" prop="price" />
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="spreadFrom.limit" :current-page="spreadFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="spreadData.total"
          @size-change="handleSizeChangeSpread" @current-change="pageChangeSpread" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { promoterListApi, spreadStatisticsApi, spreadListApi, spreadOrderListApi, spreadClearApi } from '@/api/distribution'
import cardsData from '@/components/cards/index'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
export default {
  name: 'AccountsUser',
  components: { cardsData },
  data() {
    return {
      cardLists: [],
      timeVal: [],
      tableData: {
        data: [],
        total: 0
      },
      listLoading: true,
      tableFrom: {
        // dateLimit: '',
        // keywords: '',
        page: 1,
        limit: 20
      },
      fromList: this.$constants.fromList,
      dialogVisible: false,
      spreadData: {
        data: [],
        total: 0
      },
      spreadFrom: {
        page: 1,
        limit: 10,
        dateLimit: '',
        type: 0,
        nickName: '',
        uid: ''
      },
      timeValSpread: [],
      spreadLoading: false,
      uid: '',
      onName: '',
      titleName: ''
    }
  },
  mounted() {
    // this.spreadStatistics()
    this.getList()
  },
  methods: {
    checkPermi,
    seachList() {
      this.tableFrom.page = 1
      this.getList()
    },
    // 统计
    // spreadStatistics() {
    //   spreadStatisticsApi({ dateLimit: this.tableFrom.dateLimit, keywords: this.tableFrom.nickName}).then((res) => {
    //     this.cardLists = [
    //       { name: '分销人员人数', count: res.distributionNum },
    //       { name: '发展会员人数', count: res.developNum },
    //       { name: '推广订单总数', count: res.orderNum },
    //       { name: '推广订单金额（元）', count: res.orderPriceCount },
    //       { name: '提现次数', count: res.withdrawCount }
    //     ]
    //   })
    // },
    // 清除
    clearSpread(row) {
      this.$modalSure('解除【' + row.nickname + '】的上级推广人吗').then(() => {
        spreadClearApi(row.uid).then((res) => {
          this.$message.success('清除成功')
          this.getList()
        })
      })
    },
    onSpread(uid, n, p) {
      this.onName = n
      this.titleName = p
      this.uid = uid
      this.dialogVisible = true
      this.spreadFrom = {
        page: 1,
        limit: 10,
        dateLimit: '',
        type: 0,
        nickName: '',
        uid: uid
      }
      this.getListSpread()
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 选择时间
    selectChangeSpread(tab) {
      this.timeValSpread = []
      this.spreadFrom.dateLimit = tab
      this.spreadFrom.page = 1
      this.onName === 'man' ? this.getListSpread() : this.getSpreadOrderList()
    },
    // 具体日期
    onchangeTimeSpread(e) {
      this.timeValSpread = e
      this.tableFrom.dateLimit = e ? this.timeValSpread.join(',') : ''
      this.spreadFrom.page = 1
      this.onName === 'man' ? this.getListSpread() : this.getSpreadOrderList()
    },
    onChanges() {
      this.spreadFrom.page = 1
      this.onName === 'man' ? this.getListSpread() : this.getSpreadOrderList()
    },
    // 推广人列表
    getListSpread() {
      this.spreadLoading = true
      spreadListApi({ page: this.spreadFrom.page, limit: this.spreadFrom.limit }, this.spreadFrom).then(res => {
        this.spreadData.data = res.list
        this.spreadData.total = res.total
        this.spreadLoading = false
      }).catch(() => {
        this.spreadLoading = false
      })
    },
    pageChangeSpread(page) {
      this.spreadFrom.page = page
      this.onName === 'man' ? this.getListSpread(this.uid) : this.getSpreadOrderList(this.uid)
    },
    handleSizeChangeSpread(val) {
      this.spreadFrom.limit = val
      this.onName === 'man' ? this.getListSpread(this.uid) : this.getSpreadOrderList(this.uid)
    },
    // 推广订单
    onSpreadOrder(uid, n, p) {
      this.uid = uid
      this.onName = n
      this.titleName = p
      this.dialogVisible = true
      this.spreadFrom = {
        page: 1,
        limit: 10,
        dateLimit: '',
        type: 0,
        nickName: '',
        uid: uid
      }
      this.getSpreadOrderList()
    },
    getSpreadOrderList() {
      this.spreadLoading = true
      spreadOrderListApi({ page: this.spreadFrom.page, limit: this.spreadFrom.limit }, this.spreadFrom).then(res => {
        this.spreadData.data = res.list
        this.spreadData.total = res.total
        this.spreadLoading = false
      }).catch(() => {
        this.spreadLoading = false
      })
    },
    selectChange(tab) {
      this.tableFrom.dateLimit = tab
      this.tableFrom.page = 1
      this.timeVal = []
      // this.spreadStatistics()
      this.getList()
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
      this.tableFrom.page = 1
      this.getList()
    },
    // 列表
    getList() {
      this.listLoading = true
      promoterListApi(this.tableFrom).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.selWidth {
  width: 350px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
